import './Store.less';
import { Radio, Input, Space, Select, Avatar, Button, Pagination, Image, message, Popover } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
import http from '../../utils/http'


const Store = () => {
    //分页的函数
    //当前页数
    const [page, setPage] = useState(1);
    //每页条数
    const [pageSize, setpageSize] = useState(10);
    //总条数
    const [total, setTotal] = useState(0);
    //list容器
    const [list, setList] = useState([]);
    //关注类型
    const [val, setVal] = useState('a')
    //获取所有店铺的函数
    const allStore = () => {
        http({
            url: '/panchen/getAllStore',
            method: 'get',
            data: {
                page: page,
                pageSize: pageSize
            }
        }).then((res1) => {
            http({
                url: '/panchen/getAllorderPrice',
                method: 'get'
            }).then(res2 => {
                res1.data.data.forEach(v1 => {
                    res2.data.forEach(v2 => {
                        if (v1.id == v2.store_id) {
                            v1.num = v2.num;
                            v1.payment = v2.payment;
                        }
                    })
                });
                setList(res1.data.data);
                setTotal(res1.data.count);
            })
        })
    }
    useEffect(() => {
        allStore()
    }, [])
    //分页函数
    let pageChange = (page, pageSize) => {
        setPage(page);
        //查询商品信息
        http({
            url: '/panchen/getAllStore',
            method: 'get',
            data: {
                page,
                pageSize
            }
        }).then((res) => {
            setList(res.data.data);
            setTotal(res.data.count);
        })
    }


    //按钮
    //全部
    const all = () => {
        setVal('a')
        allStore()
    }
    //已关注店铺
    const guanzhu = () => {
        setVal('b')
        http({
            url: '/panchen/getFollowStore',
            method: 'get',
            data: {
                page,
                pageSize,
                attention: '取关'
            }
        }).then((res1) => {
            http({
                url: '/panchen/getAllorderPrice',
                method: 'get'
            }).then(res2 => {
                res1.data.data.forEach(v1 => {
                    res2.data.forEach(v2 => {
                        if (v1.id == v2.store_id) {
                            v1.num = v2.num;
                            v1.payment = v2.payment;
                        }
                    })
                });
                setList(res1.data.data);
                setTotal(res1.data.count);
            })
        })
    }
    //未关注店铺
    const noguanzhu = () => {
        setVal('c')
        http({
            url: '/panchen/getNoFollowStore',
            method: 'get',
            data: {
                page,
                pageSize,
                attention: '关注'
            }
        }).then((res1) => {
            http({
                url: '/panchen/getAllorderPrice',
                method: 'get'
            }).then(res2 => {
                res1.data.data.forEach(v1 => {
                    res2.data.forEach(v2 => {
                        if (v1.id == v2.store_id) {
                            v1.num = v2.num;
                            v1.payment = v2.payment;
                        }
                    })
                });
                setList(res1.data.data);
                setTotal(res1.data.count);
            })
        })
    }
    //input框
    const { Search } = Input;
    const onSearch = (value) => {
        http({
            url: '/panchen/findStore',
            method: 'get',
            data: {
                page,
                pageSize,
                name: value
            }
        }).then((res1) => {
            http({
                url: '/panchen/getAllorderPrice',
                method: 'get'
            }).then(res2 => {
                res1.data.data.forEach(v1 => {
                    res2.data.forEach(v2 => {
                        if (v1.id == v2.store_id) {
                            v1.num = v2.num;
                            v1.payment = v2.payment;
                        }
                    })
                });
                if (res1.data.data.length) {
                    setList(res1.data.data);
                    setTotal(res1.data.count);
                    message.success('搜索成功');
                } else {
                    setList(res1.data.data);
                    setTotal(res1.data.count);
                    message.error('未查询到此店铺');
                }
            })
        })
    }
    //下拉框
    const { Option } = Select;
    const handleChange = (value) => {
        console.log(`${value}`);
    }
    //更改店铺关注
    const guanZhu = (id, attention) => {
        http({
            url: '/panchen/storeFollow',
            method: 'post',
            data: {
                id: id,
                attention: attention
            }
        }).then((res) => {
            if (val == 'a') {
                allStore()
                message.success('操作成功');
            } else if (val == 'b') {
                guanzhu()
                message.success('操作成功');
            } else {
                noguanzhu()
                message.success('操作成功');
            }
        })
    }
    //详情
    const his = useHistory()
    const xiangqing = (v) => {
        sessionStorage.setItem('xiangqing', v.id)
        his.push('/admin/storemg/xq')
    }
    //分页
    function itemRender(current, type, originalElement) {
        if (type === 'prev') {
            return <a>上一页</a>;
        }
        if (type === 'next') {
            return <a>下一页</a>;
        }
        return originalElement;
    }
    //图片样式
    let style = {
        borderRadius: 50
    }
    return (
        <div className='P-box'>
            {/* 上 */}
            <div className="d-f y-c f-w">
                {/* 按钮 */}
                {/* <div className='btnfanwei '>
                    <Radio.Group defaultValue='a' buttonStyle="solid">
                        <Radio.Button value='a' className='btn' onClick={all}>全部</Radio.Button>
                        <Radio.Button value='b' className='btn' onClick={guanzhu}>已关注</Radio.Button>
                        <Radio.Button value='c' className='btn' onClick={noguanzhu}>未关注</Radio.Button>
                    </Radio.Group>
                </div> */}
                {/* 搜索框 */}
                <div className='px-5'>
                    <Space direction="vertical">
                        <Search placeholder="快速搜索店铺" allowClear onSearch={onSearch} style={{ width: 200 }} />
                    </Space>
                </div>
                {/* 下拉框 */}
                {/* <div className=''>创建类型：</div>
                <div className=''>
                    <Select defaultValue="全部" style={{ width: 120 }} onChange={handleChange}>
                        <Option value="全部">全部</Option>
                        <Option value="已支付">已支付</Option>
                        <Option value="未支付">未支付</Option>
                    </Select>
                </div> */}
            </div>
            {/* 下 */}
            <div className='d-f f-w x-s-a'>
                {list.map((v, i) => (
                    <div key={v.id} className='dian mt2'>
                        {/* 店铺名 */}
                        <div className='d-f y-c p-2 x-s-b dxian'>
                            <div className='d-f y-c'>
                                <div>
                                    <Image style={style} width={70} src={v.logo} />
                                </div>
                                <div className='mx-1'>
                                    <div className='font-md font-w'>{v.name}</div>
                                    <div className='font-sm font-w'>开店时间：{v.create_time}</div>
                                </div>
                            </div>
                            <div>
                                <div><Button type="link" onClick={() => xiangqing(v)}>详情</Button></div>
                                {/* <Button className={v.attention == '关注' ? 'guanzhu' : 'weiguanzhu'} type="primary" onClick={() => guanZhu(v.id, v.attention)}>{v.attention}</Button> */}
                            </div>
                        </div>
                        {/* 店铺信息 */}
                        <div className=''>
                            <div className='d-f p-2 x-s-b '>
                                <div>
                                    <div >
                                        <div className='font-w font-md'>{v.num ? v.num : 0}件</div>
                                        <div className='font-sm f-c'>成交件数</div>
                                    </div>
                                    <div className='mt2'>
                                        <div className='d-f'>
                                            <Image style={style}
                                                width={40}
                                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                            />
                                            <div className='m-1 font-w font-sm'>某某旗舰店</div>
                                        </div>
                                        <div className='mt1 f-c'>上级店铺</div>
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <div className='font-w font-md'>￥{v.payment ? v.payment : 0}</div>
                                        <div className='font-sm f-c'>营业额</div>
                                    </div>
                                    <div className='mt2'>
                                        <div className='d-f'>
                                            <Image style={style}
                                                width={40}
                                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                            />
                                            <div className='m-1 font-w font-sm'>某某旗舰店</div>
                                        </div>
                                        <div>
                                            <div className='d-f font-sm mt1 x-s-b'>
                                                <div className='f-c'>下级店铺</div>
                                                <div className='f-c'>5个</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/* 详情 */}
                        {/* <div className='d-f x-s-a y-c'>
                            <div><Popover placement="bottom" content={<Image width={70} src={v.logo} />} trigger="hover">
                                <a>店主二维码</a>
                            </Popover></div>
                            <div><Popover placement="bottom" content={<Image width={70} src={v.logo} />} trigger="hover">
                                <a>小程序二维码</a>
                            </Popover></div>
                        </div> */}
                    </div>

                ))}
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>

            {/* 分页 */}
            <div className='d-f x-c mt4'>
                <Pagination
                    defaultCurrent={1}
                    defaultPageSize={pageSize}
                    current={page}
                    total={total}
                    showSizeChanger
                    size='small'
                    pageSizeOptions={[pageSize, pageSize * 2, pageSize * 3]}
                    onChange={(page, pageSize) => pageChange(page, pageSize)}
                />
            </div>
        </div>
    );
}

export default Store;